<template>
  <div id="app">
    <el-container>
      <el-header class="custom-header">
        <div class="nav">
          <div class="logo">
          <img src="./assets/img/logo.png" alt />
        </div>
        <el-menu :default-active="defaultActive" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          :router="router">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/news">新闻资讯</el-menu-item>
          <el-menu-item index="/product">产品中心</el-menu-item>
          <el-menu-item index="/case">经典案例</el-menu-item>
          <el-menu-item index="/goin">走进萃元</el-menu-item>
          <el-menu-item index="/download">下载APP</el-menu-item>
        </el-menu>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <div class="footer" v-show="isShow = true">
        <div class="footer-content">
          <div class="ercode">
            <img src="./assets/img/ercode.jpg" alt="">
            <img src="./assets/img/ABUIABACGAAgkZnf-wUoqI-EMDDKAjjKAg (1).jpg" alt="">
          </div>
          <div class="adress">
            <p>热线电话：0451-82339898</p>
            <p>联系邮箱：cuiyuancaiwu@163.com</p>  
            <p>工作时间：周一到周六09:00—17:00</p>
            <p>联系地址：哈尔滨市南岗区长江路456号</p>
          </div>
        </div>
        <div class="copyright">
          <!-- line 线 -->
        </div>
        <div class="footerMsg">
          <p>黑ICP备20000003号-1</p>
          <p>©2021 - 黑龙江萃元生物科技有限公司 版权所有</p>
          <p>黑ICP备20000003号-1</p>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      router: true,
      defaultActive: "/",
      isShow: false
    };
  },
  methods: {
    handleSelect (key) {
      this.isShow = this.defaultActive != key;
      window.console.log(this.isShow);
    }
  }
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  // overflow: hidden;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
// 导航栏=============================================================
.nav{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62.5%; /* 设置宽度为 62.5% */
  margin: 0 auto; /* 水平居中 */
  height: 90px;
}
.el-header {
  display: flex;
  // justify-content:space-around;
  // align-content: center;
  // width: 1240px;
  height: 90px !important;
  padding-top: 10px;
  background-color: rgba(117, 150, 127, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; /* 可选，根据需要调整 z-index 值 */
  .logo {
    width: 249px;
    padding: 30px;
    margin-top: 10px;
    margin-right: 100px;
    img {
      width: 100%;
      line-height: 60px;
    }
  }

  .el-menu {
    flex: 1;
    padding-top: 30px;
    margin-top: auto;
    background-color: transparent !important;
  }
}

//内容部分============================================================
.el-main {
  padding: 0 !important;
}
// 底部===============================================================
.footer {
  width: 100%;
  height: 636px;
  overflow: hidden;
  background: radial-gradient(circle at 50% -400%, #ccc  , black);
  &-content {
    width: 1240px;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;

    .content-nav {
      display: flex;
      justify-content: space-around;

      li {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        //justify-content: center;
        align-items: flex-start;

        p {
          font-size: 20px;
          color: #d4edff;
          padding: 10px 0;
        }

        span {
          color: #f7f7f7;
          font-weight: 300;
          padding: 5px 0;
        }
      }
    }

    img {
      width: 170px;
      height: 170px;
      padding: 10px;
    }
  }

  .copyright {
    // border: 1px solid #eee;
    height: 2px;
    background: linear-gradient(to right, black, #fff, black);
    // background: black;
  }
}

.el-menu--horizontal>.el-menu-item.is-active {
  background-color: transparent !important; /* 设置选中菜单项的背景色为透明 */
  border-bottom: 0px solid #FFF !important;
  color: black !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: solid 0;
}

.el-menu.el-menu--horizontal {
  border-bottom: solid 0px  !important;
}

 .el-menu-item {
    font-size: 14px;
    padding: 0 30px !important;
    cursor: pointer;
}
.el-menu-item:hover {
  background-color: transparent !important; /* 移除 hover 背景色 */
  color: black !important; /* 设置字体颜色为红色（这里是示例，你可以根据需要更改颜色） */
}
.footer-content{
  margin-top: 221px;
  display: flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 85px;
}
.adress {
  font-size: 24px;
  color:#fefefe;
  line-height: 2;
}
.footerMsg{
  text-align: center;
  // height: 182px;
  color:#ffffff;
  p{
    font-size: 18px;
    line-height: 2;
  }
}
</style>
